<nz-row>
  <div class="searchItem">
    <label for="noQuery">出库单号：</label>
    <input
      id="noQuery"
      nz-input
      placeholder="出库单号"
      [(ngModel)]="query.deliveryNumber"
    />
  </div>
  <div class="searchItem">
    <label for="availableQuery">状态：</label>
    <nz-select id="availableQuery" [(ngModel)]="query.state" nzPlaceHolder="全部" [nzBackdrop]="true" nzMode="multiple"
               nzAllowClear [nzMaxTagCount]="1"
               nzShowSearch>
      <nz-option [nzValue]="1" nzLabel="草稿"></nz-option>
      <nz-option [nzValue]="2" nzLabel="待审核"></nz-option>
      <nz-option [nzValue]="3" nzLabel="待打包"></nz-option>
      <nz-option [nzValue]="4" nzLabel="待出库"></nz-option>
      <nz-option [nzValue]="5" nzLabel="已出库"></nz-option>
      <nz-option [nzValue]="6" nzLabel="已签收"></nz-option>
      <nz-option [nzValue]="7" nzLabel="已取消"></nz-option>
      <nz-option [nzValue]="8" nzLabel="审核不通过"></nz-option>
      <nz-option [nzValue]="9" nzLabel="物流异常"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="outType">出库类型：</label>
    <nz-select id="outType" [(ngModel)]="query.type" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
               [nzMaxTagCount]="1" nzAllowClear
               nzShowSearch>
      <nz-option [nzValue]="t.content" [nzLabel]="t.name" *ngFor="let t of outStoreTypes"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="commodity">包含商品：</label>
    <input
      id="commodity"
      nz-input
      placeholder="编号、序列号、IMEI、名称"
      [(ngModel)]="query.goods"
    />
  </div>
  <div class="searchItem">
    <label for="relation">关联单号：</label>
    <input
      id="relation"
      nz-input
      placeholder="关联单号"
      [(ngModel)]="query.orderNum"
    />
  </div>
  <div class="searchItem">
    <label for="logistics">物流单号：</label>
    <input
      id="logistics"
      nz-input
      placeholder="物流单号"
      [(ngModel)]="query.expressNo"
    />
  </div>
  <div class="searchItem">
    <label for="createQuery">创建日期：</label>
    <nz-range-picker id="createQuery" nzFormat="yyyy-MM-dd" [(ngModel)]="query.createTime"></nz-range-picker>
  </div>
  <div class="searchItem">
    <label for="outQuery">出库日期：</label>
    <nz-range-picker id="outQuery" nzFormat="yyyy-MM-dd" [(ngModel)]="query.outTime"></nz-range-picker>
  </div>
  <div class="searchItem">
    <label for="isFreightQuery">邮费承担：</label>
    <nz-select id="isFreightQuery" [(ngModel)]="query.isFreight" nzPlaceHolder="全部" [nzBackdrop]="true" nzAllowClear>
      <nz-option [nzValue]="0" nzLabel="我司承担"></nz-option>
      <nz-option [nzValue]="1" nzLabel="用户承担"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetQuery()">重置</button>
  </div>
</nz-row>
<!--操作-->
<nz-row>
  <button nz-button nzType="primary" (click)="add()">+新建出库单</button>
  <button nz-button nzType="primary" (click)="setPrint()">设置打印机</button>

  <!--  <button style="margin-left: 48px" nz-button nzType="primary">提交审核</button>-->
  <button style="margin-left: 48px" nz-button nzType="primary" nzPopconfirmPlacement="top"
          nz-popconfirm
          nzPopconfirmTitle="确认提交审核?"
          nzOkText="确认"
          nzCancelText="取消" (nzOnConfirm)="batchChangeStatus(2)">提交审核
  </button>
  <button nz-button nzType="primary" nzPopconfirmPlacement="top"
          nz-popconfirm
          nzPopconfirmTitle="确认打包完成?"
          nzOkText="确认"
          nzCancelText="取消" (nzOnConfirm)="batchChangeStatus(4)"
          *ngIf="permissionService.userPermission.has('used-store:usedOutList:pack')">打包完成
  </button>
  <button nz-button nzType="primary" nzPopconfirmPlacement="top"
          nz-popconfirm
          nzPopconfirmTitle="确认出库?"
          nzOkText="确认"
          nzCancelText="取消" (nzOnConfirm)="batchChangeStatus(5)"
          *ngIf="permissionService.userPermission.has('used-store:usedOutList:outStore')">出库
  </button>
  <button nz-button nzType="primary" nzPopconfirmPlacement="top"
          nz-popconfirm
          nzPopconfirmTitle="确认手动签收?"
          nzOkText="确认"
          nzCancelText="取消" (nzOnConfirm)="batchChangeStatus(6)"
          *ngIf="permissionService.userPermission.has('used-store:usedOutList:sign')">签收
  </button>
  <button nz-button nzType="primary" nzPopconfirmPlacement="top"
          nz-popconfirm
          nzPopconfirmTitle="确认打印物流面单"
          nzOkText="确认"
          nzCancelText="取消" (nzOnConfirm)="batchPrint()" [disabled]="!!printList.length">打印面单
  </button>
</nz-row>
<!--表格-->
<nz-table
  style="margin-top: 8px"
  #rowSelectionTable
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzScroll]="{ x: '1100px' }"
  [nzData]="listOfData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listOfData.total"
  [(nzPageIndex)]="query.page"
  [(nzPageSize)]="query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th [nzChecked]="checked" nzWidth="50px" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"
        nzLeft></th>
    <th nzAlign="center" nzWidth="160px" nzLeft>出库单号</th>
    <th nzAlign="center" nzWidth="90px">出库类型</th>
    <th nzAlign="center" nzWidth="100px">用户身份</th>
    <th nzAlign="center" nzWidth="60px">状态</th>
    <th nzAlign="center" nzWidth="180px">关联单号</th>
    <th nzAlign="center" nzWidth="80px">标题</th>
    <th nzAlign="center" nzWidth="80px">出库数量</th>
    <th nzAlign="center" nzWidth="80px">邮费承担</th>
    <th nzAlign="center" nzWidth="80px">收货人</th>
    <th nzAlign="center" nzWidth="350px">收货地址</th>
    <th nzAlign="center" nzWidth="160px">物流信息</th>
    <th nzAlign="center" nzWidth="180px">创建时间</th>
    <th nzAlign="center" nzWidth="180px">出库时间</th>
    <th nzAlign="center" nzWidth="180px">签收/取消时间</th>
    <th nzAlign="center" nzWidth="250px" nzRight>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index;">
    <td
      [nzChecked]="setOfCheckedId.has(data['id'])"
      [nzDisabled]="data['disabled']"
      (nzCheckedChange)="onItemChecked(data['id'], $event)" nzLeft
    ></td>
    <td nzAlign="center" nzLeft>
      <a target="_blank" routerLink="/used-store/usedOutDetail" [queryParams]="{id: data['id']}">
        {{ data['deliveryNumber'] }}
      </a>
    </td>
    <!-- <td nzAlign="center" nzLeft><a (click)="toDetail(data['id'])">{{ data['deliveryNumber'] }}</a></td> -->
    <td nzAlign="center">{{ outStoreType(data['type']) }}</td>
    <!-- 用户身份(注：二手销售单才显示) -->
    <td nzAlign="center">
      <ng-container *ngIf="data['type'] === 1;else templateSf">
        <ng-container [ngSwitch]="data['userType']">
          <nz-tag *ngSwitchCase="0">通用</nz-tag>
          <nz-tag [nzColor]="'#87d068'" *ngSwitchCase="1">C端</nz-tag>
          <nz-tag [nzColor]="'#2db7f5'" *ngSwitchCase="2">B端</nz-tag>
        </ng-container>
      </ng-container>
      <ng-template #templateSf>-</ng-template>
    </td>
    <td nzAlign="center" class="status" [attr.status]="data['state']">{{ STATUS[data['state']] }}</td>
    <td nzAlign="center">{{ data['orderNum'] }}</td>
    <td nzAlign="center">{{ data['title'] }}</td>
    <td nzAlign="center">{{ data['number'] }}</td>
    <td nzAlign="center">{{ data['isFreight'] === 0 ? '我司承担' : '用户承担'}}</td>
    <td nzAlign="center">{{ data['consignee'] }}</td>
    <td nzAlign="center">{{ data['address'] }}</td>
    <td nzAlign="center">
      {{ data['expressNo'] }}
      <i (click)="showLogisticsModal(data)"
         *ngIf="data['deliveryMethod']!==1&&[3,4].includes(data['state'])||[9].includes(data['state'])&&permissionService.userPermission.has('used-store:usedOutList:modifyLogistics')"
         nz-icon nzType="edit"
         nzTheme="outline"></i>
    </td>
    <td nzAlign="center">{{ data['createTime'] }}</td>
    <td nzAlign="center">{{ data['deliveryTime'] }}</td>
    <td nzAlign="center">{{ data['dealTime'] }}</td>
    <td nzAlign="center" nzRight>
      <a (click)="view(data['id'])"
         *ngIf="[1,8,9].includes(data['state'])&&permissionService.userPermission.has('used-store:usedOutList:edit')">编辑</a>
      <!--      <a nzPopconfirmPlacement="top"-->
      <!--         nz-popconfirm-->
      <!--         nzPopconfirmTitle="确认提交审核?"-->
      <!--         nzOkText="确认"-->
      <!--         nzCancelText="取消" (nzOnConfirm)="changeStatus(data,2)" *ngIf="data['state']===1">提交审核</a>-->
      <a (click)="showTrackModal(data['id'])" *ngIf="[2,3,4,5,6,7,8,9].includes(data['state'])">跟进</a>
      <!--      <a nzPopconfirmPlacement="top"-->
      <!--         nz-popconfirm-->
      <!--         nzPopconfirmTitle="确认出库?"-->
      <!--         nzOkText="确认"-->
      <!--         nzCancelText="取消" (nzOnConfirm)="outStore(data)" *ngIf="[3,4].includes(data['state'])&&permissionService.userPermission.has('used-store:usedOutList:outStore')">出库</a>-->
      <a (click)="print(data)"
         *ngIf="[3,4,5].includes(data['state'])&&permissionService.userPermission.has('used-store:usedOutList:print')">打印面单</a>
      <a (click)="showCheckModal(data)"
         *ngIf="data['state']===2&&permissionService.userPermission.has('used-store:usedOutList:check')">审核</a>
      <!--      <a-->
      <!--        nzPopconfirmPlacement="top"-->
      <!--        nz-popconfirm-->
      <!--        nzPopconfirmTitle="确认打包完成?"-->
      <!--        nzOkText="确认"-->
      <!--        nzCancelText="取消" (nzOnConfirm)="changeStatus(data,4)" *ngIf="data['state']===3&&permissionService.userPermission.has('used-store:usedOutList:pack')">打包完成</a>-->
      <!--      <a nzPopconfirmPlacement="top"-->
      <!--         nz-popconfirm-->
      <!--         nzPopconfirmTitle="确认手动签收?"-->
      <!--         nzOkText="确认"-->
      <!--         nzCancelText="取消" (nzOnConfirm)="changeStatus(data,6)" *ngIf="data['state']===5&&permissionService.userPermission.has('used-store:usedOutList:sign')">签收</a>-->
      <a nzPopconfirmPlacement="top"
         nz-popconfirm
         nzPopconfirmTitle="确认取消?如果订单是顺丰发货，则取消后顺丰订单也会被同时取消"
         nzOkText="确认"
         nzCancelText="取消" (nzOnConfirm)="cancelSF(data)"
         *ngIf="[3,4].includes(data['state'])&&data['type']!==1&&data['type']!==2">取消</a>
      <a style="color: #F56C6C" *ngIf="data['state']===1"
         nzPopconfirmPlacement="top"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除该数据吗?"
         nzOkText="确认"
         nzCancelText="取消"
         (nzOnConfirm)="deleteRow(data['id'])">删除</a>
      <a
        *ngIf="permissionService.userPermission.has('used-store:usedOutList:saleInfos') && [5, 6].includes(data['state']) && !data['sumPrice'] && ![1, 2].includes(data['type']) && data['type']!==6"
        [routerLink]="['/used-store/usedOutSaleInfo']"
        [queryParams]="{ id: data['id'] }">
        销售信息
      </a>
      <a (click)="exportOutOrderData(data)">
        导出
      </a>
    </td>
  </tr>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>

<!--审核-->
<nz-modal
  [(nzVisible)]="checkModal.visible"
  nzTitle="审核"
  (nzOnCancel)="hideCheckModal()">
  <div *nzModalContent>
    <div class="checkModal">
      <label for="checkRemark">备注：</label>
      <textarea
        id="checkRemark"
        nz-input
        [maxLength]="100"
        [(ngModel)]="checkModal.remark"
        placeholder="请输入备注"
        [nzAutosize]="{ minRows: 2, maxRows: 6 }"
      ></textarea>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="primary" (click)="checkResolve()">通过</button>
    <button nz-button nzType="primary" (click)="checkReject()">不通过</button>
  </div>
</nz-modal>

<!--物流-->
<nz-modal class="logisticsModal"
          [(nzVisible)]="logisticsModal.visible"
          nzTitle="物流"
          (nzOnCancel)="hideLogisticsModal()">
  <div *nzModalContent>
    <div class="flexRow">
      <label class="label" for="logisticsCompany"><span>*</span>发货方式：</label>
      <nz-radio-group [(ngModel)]="logisticsModal.deliveryMethod">
        <label nz-radio [nzValue]="1">顺丰快递</label>
        <label nz-radio [nzValue]="2">其他快递</label>
        <label nz-radio [nzValue]="3">线下配送</label>
      </nz-radio-group>
    </div>
    <div class="flexRow" *ngIf="logisticsModal.deliveryMethod===2">
      <label class="label" for="logisticsCompany"><span>*</span>物流公司：</label>
      <nz-select id="logisticsCompany" [(ngModel)]="logisticsModal.company" nzPlaceHolder="全部" [nzBackdrop]="true"
                 nzAllowClear
                 nzShowSearch>
        <nz-option [nzValue]="l.content" [nzLabel]="l.name" *ngFor="let l of logistics"></nz-option>
      </nz-select>
    </div>
    <div class="flexRow" *ngIf="logisticsModal.deliveryMethod===2">
      <label class="label" for="logisticsNo"><span>*</span>物流单号：</label>
      <input id="logisticsNo" nz-input placeholder="请输入物流单号" [(ngModel)]="logisticsModal.no"/>
    </div>
    <div class="flexRow" *ngIf="logisticsModal.deliveryMethod!==3">
      <label class="label" for="isFreight"><span>*</span>邮费承担：</label>
      <nz-radio-group id="isFreight" [(ngModel)]="logisticsModal.isFreight">
        <label nz-radio [nzValue]="0">我司承担</label>
        <label nz-radio [nzValue]="1">用户承担</label>
      </nz-radio-group>
    </div>
    <div class="flexRow" *ngIf="logisticsModal.deliveryMethod!==3">
      <label class="label" for="freight">快递费：</label>
      <nz-input-number id="freight" [(ngModel)]="logisticsModal.freight" [nzPrecision]="2"
                       nzPlaceHolder="快递费"></nz-input-number>
    </div>
  </div>
  <div *nzModalFooter>
    <!--    <button nz-button nzType="primary"-->
    <!--            nzPopconfirmPlacement="top"-->
    <!--            nz-popconfirm-->
    <!--            nzPopconfirmTitle="确认将物流方式改成线下发货？"-->
    <!--            nzOkText="确认"-->
    <!--            nzCancelText="取消"-->
    <!--            (nzOnConfirm)="modifyLogistics(3)">线下发货-->
    <!--    </button>-->
    <!--    <button nz-button nzType="primary"-->
    <!--            nzPopconfirmPlacement="top"-->
    <!--            nz-popconfirm-->
    <!--            nzPopconfirmTitle="确认使用顺丰发货吗？点击确定系统将自动同步订单至顺丰"-->
    <!--            nzOkText="确认"-->
    <!--            nzCancelText="取消"-->
    <!--            (nzOnConfirm)="modifyLogistics(1)">使用顺丰-->
    <!--    </button>-->
    <button nz-button nzType="primary"
            nzPopconfirmPlacement="top"
            nz-popconfirm
            [nzPopconfirmTitle]="logisticsModal.deliveryMethod===1?'确认使用顺丰发货吗？点击确定系统将自动同步订单至顺丰':'确认修改物流信息？'"
            nzOkText="确认"
            nzCancelText="取消"
            (nzOnConfirm)="modifyLogistics()">确认
    </button>
    <button nz-button nzType="default" (click)="hideLogisticsModal()">取消</button>
  </div>
</nz-modal>

<!--跟进模态框-->
<nz-modal nzWidth="1050px"
          [nzVisible]="trackModal.visible"
          nzTitle="跟进"
          (nzOnCancel)="hideTrackModal(false)"
          [nzFooter]="null"
>
  <ng-container *nzModalContent>
    <textarea rows="4" nz-input placeholder="请输入跟进内容" style="width: 100%" [(ngModel)]="trackModal.remark"></textarea>
    <div style="margin-top: 8px;display: flex;justify-content: space-between">
      <nz-upload [(nzFileList)]="trackModal.file" [nzAccept]="'image/*,.pdf,.txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx'"
                 [nzBeforeUpload]="beforeUpload">
        <button nz-button>
          选择文件
        </button>
        <span>请选择图片、office文件、PDF文件</span>
      </nz-upload>
      <button nz-button nzType="primary" (click)="hideTrackModal(true)">保存</button>
    </div>
    <nz-row style="margin-top: 8px;max-height: 604px;overflow-y: auto" *ngIf="trackHistoryList.length">
      <!--      <nz-divider nzText="跟进信息"></nz-divider>-->
      <nz-timeline style="padding: 8px;width: 100%">
        <nz-timeline-item [nzLabel]="lt['createTime']"
                          *ngFor="let lt of trackHistoryList">
          {{lt['station']}}
          <div>{{lt['follower']}}</div>
          <div>{{lt['content']}}</div>
          <a *ngIf="lt['enclosure']" [href]="lt['enclosure']" style="color: #008dff" target="_blank">点击查看</a>
        </nz-timeline-item>
      </nz-timeline>
    </nz-row>
  </ng-container>
</nz-modal>

<!--<app-print-logistics [data]="printLogisticsInfo" [hidden]="true" id="printLogistics"></app-print-logistics>-->
<app-print-express-sf [data]="printLogisticsInfo" [hidden]="true" id="printExpressSf"></app-print-express-sf>
<app-print-logistics-jd [data]="printLogisticsInfoJD" [hidden]="true" id="printLogisticsJD"></app-print-logistics-jd>
